
<script setup>
import { ref, reactive, watch } from 'vue';
import { message } from 'ant-design-vue';
import { useUserStore } from '@/stores/user';
import { useRouter } from "vue-router";
import Cookies from 'js-cookie';
import utils from "@/utils"
import { login, getSmscode, queryImgCode } from "@/apis/login";
import { theme } from 'ant-design-vue';
import { onMounted } from 'vue';

const user = useUserStore();
const router = useRouter();
const loading = ref(false)
const token = ref({ colorPrimary: '#0850B3' })
const currentLoginMethod = ref(2);//1 快捷登录 2密码登录
const formState = ref({
    username: '',
    type: 2,//1、密码，2、验证码
    code: '',
    plat: 'web',
    password: '',
    uuid: ""
});
const imgCode = reactive({
    img: "",
})
const isCodeFlang = ref(true)
const countDown = ref(60)
onMounted(() => {
    getImgCode();
})

const getImgCode = () => {
    queryImgCode().then(res => {
        if (res.code === 200) {
            imgCode.img = res.data.img;
            formState.value.uuid = res.data.uuid;
        }
    })
}
const onFinish = values => {
    if (!formState.value.username) {
        message.error('请输入手机号');
        return;
    }
    if (currentLoginMethod.value === 2 && !formState.value.password) {
        message.error('请输入密码');
        return;
    }
    if (currentLoginMethod.value === 1 && !formState.value.code) {
        message.error('请输入验证码');
        return;
    }
    loading.value = true;
    login(formState.value).then(res => {
        if (res.code === 200) {
            let token = "Bearer" + " " + res.data.token;
            user.getUserInfo({ ...res.data.userInfo })
            user.getToken(token)
            user.getRefreshToken(res.data.refreshToken)
            router.push({ path: "/" })
            loading.value = false;
        } else {
            loading.value = false;
        }
    })
};
const onFinishFailed = errorInfo => {
    console.log('Failed:', errorInfo);
};
const getVerificationCode = () => {
    if (!formState.value.username) {
        message.error('请输入手机号');
        return;
    }
    getSmscode({ phone: formState.value.username }).then(res => {
        if (res.code === 1) {
            isCodeFlang.value = false
            let times = setInterval(() => {
                countDown.value--;
                if (countDown.value <= 0) {
                    clearInterval(times);
                    isCodeFlang.value = true;
                    return
                }
            }, 1000)
        } else {
            message.error(res.msg);
        }
    })
}

</script>
<template>
    <a-config-provider :locale="locale" :theme="{
        algorithm: theme.compactAlgorithm,
        token: token,
    }">
        <div class="login-container">
            <div class="login-box">
                <div class="login-method">
                    <img class="logo" src="@/assets/images/logo.png" alt="">
                    <h1>南通华灿科技</h1>
                </div>
                <a-form :model="formState" name="basic" @finish="onFinish" @finishFailed="onFinishFailed">
                    <a-form-item label="账号" name="username">
                        <a-input v-model:value="formState.username" placeholder="请输入用户名或手机号" />
                    </a-form-item>
                    <a-form-item v-if="currentLoginMethod == 1" label="验证码" name="code">
                        <a-input class="code" v-model:value="formState.code" placeholder="请输入验证码" />
                        <div v-if="isCodeFlang" class="verification-code" @click="getVerificationCode">获取验证码</div>
                        <div v-else class="verification-code flang">{{ countDown }}秒后可重发</div>
                    </a-form-item>
                    <a-form-item v-if="currentLoginMethod == 2" label="密码" name="password">
                        <a-input-password v-model:value="formState.password" autocomplete="off" placeholder="请输入密码" />
                    </a-form-item>
                    <a-form-item v-if="currentLoginMethod == 2" label="验证码" name="code">
                        <a-input class="code" v-model:value="formState.code" placeholder="请输入验证码" />
                        <div class="code-img" @click="getImgCode"><img :src="imgCode.img" alt=""></div>
                    </a-form-item>
                    <a-form-item>
                        <a-button class="btn-submit" type="primary" html-type="submit" :loading="loading">登录</a-button>
                    </a-form-item>
                </a-form>
            </div>
            <!-- <img class="bgc" src="@/assets/images/login_bg1.png" alt=""> -->
        </div>
    </a-config-provider>
</template>
<style lang='scss' scoped>
.login-container {
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    background: url("@/assets/images/login_bg1.png")no-repeat;
    background-position: -232px -101px;
    background-size: 120% 120%;

    .code-img {
        display: block;
        margin-left: 10px;

        img {
            display: block;
            height: 100%;
            cursor: pointer;
        }
    }

    .bgc {
        position: fixed;
        display: block;
        width: 100vw;
        height: 100vh;
        pointer-events: none;
        top: 0;
        z-index: 0;
    }

    .login-box {
        position: fixed;
        top: 50%;
        right: 30%;
        width: 434px;
        background: #fff;
        box-shadow: 0px 0 20px 1px rgba(86, 164, 255, 0.36);
        border-radius: 10px 10px 10px 10px;
        opacity: 1;
        transform: translateY(-50%);
        padding: 32px;
        z-index: 5;

        .login-method {
            margin-bottom: 15px;
            display: flex;
            justify-content: center;
            align-items: center;

            img {
                display: block;
                height: 30px;
            }

            h1 {
                font-size: 18px;
                font-weight: 800;
                letter-spacing: 5px;
            }
        }

        .qrcode {
            position: absolute;
            top: 2px;
            right: 2px;
            cursor: pointer;
        }
    }
}

.verification-code {
    width: 96px;
    height: 36px;
    line-height: 36px;
    text-align: center;
    background: #FFFFFF;
    border-radius: 0px 0px 0px 0px;
    opacity: 1;
    border: 1px solid $Primary;
    color: $Primary;
    cursor: pointer;

    &.flang {
        border-color: #B2B2B2;
        color: #B2B2B2;
        cursor: no-drop;
    }
}

.code {
    width: 230px;
}

.btn-submit {
    width: 100%;
    height: 42px;
    margin: 0;
}

:deep(.ant-form-row) {
    display: block;
}

:deep(.ant-form-item-control-input-content) {
    display: flex;
    justify-content: space-between;
}

:deep(.ant-form-item-control-input-content) {
    height: 36px;
}

@media (max-width:1536px) {
    .login-container {
        background-position: -348px -90px;
        background-size: 130% 130%;
    }
}</style>